{template 'common/header'}
<style>
	ul,li {padding:0; margin:0; border:0;}
	body{background:#f8f8f8; padding-bottom:63px;}
	.btn-group-top-box{padding:10px 0; border-bottom:1px solid #A9A8A8; font-family:Helvetica, Arial, sans-serif; text-align:center; width:100%;}
	.btn-group-top{overflow:hidden;}
	.btn-group-top .btn{ color: #000000;background: #F8F8F8;}
	.btn-group-top .btn.active::after{display: block;position: absolute;bottom: -.5px;left: 50%;width: 100%;height: 3px;background: #00a5e0;-webkit-transform: translateX(-50%);transform: translateX(-50%);content: " ";}
	.btn.use{background:#56c6d6; color:#FFF; border:0; border-radius:4px;}
	
	.voucher-main{overflow:hidden;}
	.voucher-main .list-cash-coupon{padding:10px 0 0 0; list-style:none; margin:10px auto;}
	.voucher-main .list-cash-coupon li{margin:10px 0;}
	.voucher-main .list-cash-coupon a{display:block;width:281px;height:109px;margin:auto;background:url('resource/images/voucher.png') no-repeat 0 -9px;-webkit-background-size:575px auto;position:relative;}
	.voucher-main .list-cash-coupon a>p{position: absolute;max-width:200px;height:20px;color:#FFF;-webkit-box-sizing:border-box;}
	.voucher-main .list-cash-coupon a>p:nth-of-type(1){left:25px;top:20px;font-size:14px;}
	.voucher-main .list-cash-coupon a>p:nth-of-type(1)>span{font-size:30px;}
	.voucher-main .list-cash-coupon a>p:nth-of-type(2){left: 26px;top: 62px;font-size: 14px;}
	.voucher-main .list-cash-coupon a>p:nth-of-type(2):first-letter{font-size:14px;margin-right:3px;}
	.voucher-main .list-cash-coupon a>p:nth-of-type(3){left: 26px;top: 83px;font-size: 12px;}
	.voucher-main .list-cash-coupon a>p:nth-of-type(4){left: 160px;top: 42px;font-size: 11px;}
	.voucher-main .list-cash-coupon a>p:nth-of-type(5){right: 12px;top:18px;font-size:14px;width:25px; line-height:18px;}
	.voucher-main .list-cash-coupon li:nth-of-type(4n+2) a, .list-cash-coupon li .a2{background-position: 0 -133px;}
	.voucher-main .list-cash-coupon li:nth-of-type(4n+3) a, .list-cash-coupon li .a3{background-position: 0 -256px;}
	.voucher-main .list-cash-coupon li:nth-of-type(4n) a, .list-cash-coupon li .a4{background-position: 0 -378px;}
	.voucher-main .list-cash-coupon li[disabled] a{background-position: 0 -502px;}
	.voucher-main .list-cash-coupon li[disabled] a:after{content: "";-webkit-background-size: 110px auto;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;pointer-events: none;}
	.voucher-main .list-cash-coupon li[disabled="expire"] a:after{background-image: url('resource/images/voucher02.png'); background-repeat: no-repeat; background-position:50px 15px;}
	.voucher-main .list-cash-coupon li[disabled] a>p{color:rgba(255,255,255,0.3)!important;}
	.voucher-main .list-cash-coupon li.used a{background-position-x:right!important;}
	.voucher-main .list-cash-coupon li.used:nth-of-type(4n+1) a>p:nth-of-type(5){color:#ee5375;}
	.voucher-main .list-cash-coupon li.used:nth-of-type(4n+2) a>p:nth-of-type(5){color:#ffa619;}
	.voucher-main .list-cash-coupon li.used:nth-of-type(4n+3) a>p:nth-of-type(5){color:#92c427;}
	.voucher-main .list-cash-coupon li.used:nth-of-type(4n) a>p:nth-of-type(5){color:#2f9abd;}
	.voucher-main .read-coupon .list-cash-coupon a>p:nth-of-type(3){left:210px; top:65px; font-size:10px;}
	
	.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{background-color:#5ac5d4; border-color:#5ac5d4;}
	.pagination>li>a, .pagination>li>span{color:#5ac5d4; border:1px solid #a5d7de;}
</style>
<style media="all" type="text/css">
	.scroll-container .list-group {list-style:none; padding:0; margin:0; width:100%; text-align:left;}
	.scroll-container .list-group .list-group-item{border:none; background:#f8f8f8;}
	.scroll-container .list-group .list-group-item .con{background:#ffffff; width:80%; margin:0 auto;}
	.scroll-container .list-group .list-group-item .list-hd{padding:5px 20px;}
	.scroll-container .list-group .list-group-item .list-hd h5{font-weight:bold; margin-bottom:2px; font-size:16px; color:#444444;}
	.scroll-container .list-group .list-group-item .list-hd p{color:#b8b8b9;}
	.scroll-container .list-group .list-group-item .list-con img{display:block; width:90%; margin:0 auto;}
	.scroll-container .list-group .list-group-item .list-con .derpn{padding:10px 10px 0 10px; border-top:1px dotted rgb(204, 204, 204); margin-top:10px;display:none;}
	.scroll-container .list-group .list-group-item .list-ft{width:290px; background: transparent url('resource/images/ft-bg.png') no-repeat 0 0; background-size: 100% auto; height: 44px; line-height: 48px; overflow: hidden; position:relative; left:-5px; top:5px; padding:0 0 0 15px;}
	.scroll-container .list-group .list-group-item .list-ft b{color: #56c6d6; font-size: 30px; margin-right:5px;}
	.scroll-container .list-group .list-group-item .list-ft .btns{width:105px; text-align:center; font-size:18px; color:#ffffff; line-height:44px;}
	.scroll-container .list-group .list-group-item .list-ft .btns a{color:#ffffff;}
	.scroll-container .load-more{padding:10px;text-align:center;font-size:1em;}
</style>

<style>
	/*手机余额充值*/
	.charge select{position:absolute;}
	.charge span input{position:absolute; width:150px; height:30px; top:2px; border:none; left:42px; z-index:10; padding-left:10px; outline:none;}
	.charge.panel{margin:.5em; border:none;}
	.charge.panel-info>.panel-heading {background: -webkit-gradient(linear, 0 0, 100% 0, from(#ebebeb), to(#f3f9fa), color-stop(30%, #f5f9f9)); color:#666666; border:none;}
	a{color:#666666;}a:hover{color: #3ebacc;}
	.charge .btn.btn-primary{background: #56c6d6; color: #FFF; border: 0;}
	.charge i{display:inline-block; width:15px; height:15px; text-align:center; line-height:15px;}
</style>
<div class="btn-group-top-box">
	<div class="btn-group btn-group-top">
		<a href="{php echo $this->createMobileUrl('ec_chong',array('type'=>'credit2'))}" class="btn btn-default {if $type == 'credit2'}active{/if}">充值余额</a>
		<a href="{php echo $this->createMobileUrl('ec_chong',array('type'=>'credit1'))}" class="btn btn-default {if $type == 'credit1'}active{/if}">充值积分</a>
	</div>
</div>
<div class="scroll-container">
	<div class="wrapper">
		<ul class="list-group charge" >
		<form name="theform" method="post" role="form" id="form1">
			<li class="list-group-item">
				<input type="hidden" name="c" value="entry" />
				<input type="hidden" name="m" value="meepo_bbs" />
				<input type="hidden" name="i" value="{$_W['uniacid']}" />
				<input type="hidden" name="do" value="ec_chong" />
				<input type="hidden" name="type" value="{$_GPC['type']}" />
				<div class="form-group input-group">
					<div class="input-group-addon"><i class="fa fa-user"></i></div>
					<input type="text" class="form-control" placeholder="用户名" value="{$username}" readonly>
				</div>
				<div class="form-group" style="position:relative;">
					<div class="input-group">
						<div class="input-group-addon"><i class="fa fa-money"></i></div>
						<select name="moneySe" id="moneySe" class="form-control">
							<option value="0">请选择</option>
							<option value="5">5元</option>
							<option value="10">10元</option>
							<option value="20">20元</option>
							<option value="50">50元</option>
							<option value="100">100元</option>
						</select>
					</div>
					<span><input type="text" placeholder="请输入充值金额" name="money" id="money"></span>
				</div>
				<input type="submit" name="submit" class="btn btn-primary btn-block btn-lg" value="立即充值" style="margin-top:2em;">
				<input type="hidden" name="token" value="{$_W['token']}">	
			</li>
		</form>
		</ul>
		<div class="btn-group-top-box">
			<div class="btn-group btn-group-top">
				
			</div>
		</div>
	</div>
</div>
{template 'default/templates/activity/footerbar'}

<script>
	{if $type == 'credit1'}
	
	{/if}
	
	{if $type == 'credit2'}
		
	{/if}
	
	$('#moneySe').change(function(){
		var money = $('#moneySe').val();
		if(parseFloat(money) > 0){
			$('#money').val($('#moneySe').val());
		} else {
			$('#money').val('');
		}
	});
	$('#form1').submit(function(){
		var money = parseFloat($('#money').val().trim());
		if(isNaN(money)) {
			util.message('请输入正确的充值金额', '', 'error');
			return false;
		}
	});
</script>

<script>
function displayQr(url) {
    require(['jquery', 'util'], function($, u) {
        var content = '<div class="panel panel-default text-center"><img src="' + url + '" alt="核销二维码" class="img-rounded" style="width: 90%;"></div>';
        var footer =
                '<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>';
        var diaobj = u.dialog('请店员扫码核销', content, footer);
        diaobj.find('.btn-default').click(function() {
            diaobj.modal('hide');
        });
        diaobj.modal('show');
    });
}
</script>

{template 'common/footer'}